<template>
    <el-card class="update-log">
        <template v-slot:header>
            <div class="clearfix">
                <span>公告</span>
            </div>
        </template>
        <el-collapse accordion>
            <el-collapse-item v-for="(item, index) in announcements" :key="index" :title="item.title">
                <ol>
                    <li v-for="(detail, idx) in item.details" :key="idx">{{ detail }}</li>
                </ol>
            </el-collapse-item>
        </el-collapse>
    </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const announcements = ref([]);

// 模拟数据
const mockData = [
    {
        title: "下班时间更改",
        details: [
            "每天早上8:50之前到，不要迟到",
            "请确保提前10分钟打卡"
        ]
    },
    {
        title: "上班摸鱼处罚条例",
        details: [
            "上班摸鱼点名批评",
            "屡犯者将面临罚款"
        ]
    },
    {
        title: "审批流程更改",
        details: [
            "审批流程第一审批由经理改为组长",
            "所有申请需在2个工作日内处理"
        ]
    },
    {
        title: "年度体检通知",
        details: [
            "请所有员工参加每年的健康体检",
            "体检时间定于下个月15日至20日"
        ]
    },
    {
        title: "新员工培训安排",
        details: [
            "新员工培训将于下周一开始",
            "地点：会议室A，时间：上午9:00"
        ]
    },
    {
        title: "节假日放假安排",
        details: [
            "国庆节放假安排：10月1日至10月7日",
            "请提前安排好工作"
        ]
    },
    {
        title: "公司团建活动",
        details: [
            "下个月将举行团队建设活动",
            "请各部门负责人尽快报名参加"
        ]
    },
    {
        title: "安全生产培训",
        details: [
            "定于下周三进行安全生产培训",
            "请务必参加，确保安全知识更新"
        ]
    },
    {
        title: "薪资调整通知",
        details: [
            "下个月开始实施新的薪资制度",
            "具体细节请查看内部通知"
        ]
    },
    {
        title: "季度总结会",
        details: [
            "季度总结会将在本月最后一个工作日举行",
            "请准备好相关材料"
        ]
    }
];

const fetchAnnouncements = async () => {
    // 模拟请求延迟
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(mockData);
        }, 1000);
    });
};

onMounted(async () => {
    try {
        announcements.value = await fetchAnnouncements(); // 使用模拟数据
    } catch (error) {
        console.error('Error fetching announcements:', error);
    }
});
</script>

<style scoped>
.update-log {
    height: 375px;
    /* 固定高度 */
    overflow-y: auto;
    /* 启用垂直滚动 */
}
</style>
